<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<head>
<meta charset="UTF-8">
<title>sku添加页面</title>
</head>
<body>
	<form id="skuForm">
	<input type="hidden" name="id" value="${sku.id }">
		<table class="table table-hover">
			<tr>
				<td>商品名称</td>
				<td><input type="hidden" name="spuId" value="${sku.spu.id }"> <input type="text"
					name="goodsName" value="${sku.spu.goodsName }" readonly="readonly">
				</td>
			</tr>
			<tr>
				<td>标题</td>
				<td><input type="text" name="title" value="${sku.title }"></td>


			</tr>
			<tr>
				<td>卖点</td>
				<td><input type="text" name="sellPoint" value="${sku.sellPoint }"></td>


			</tr>
			<tr>
				<td>当前价格</td>
				<td><input type="text" name="price" value="${sku.price }"></td>


			</tr>
			<tr>
				<td>市场价格</td>
				<td><input type="text" name="marketPrice" value="${sku.marketPrice }"></td>


			</tr>
			<tr>
				<td>成本价格</td>
				<td><input type="text" name="costPrice" value="${sku.costPrice }"></td>


			</tr>
			<tr>
				<td>库存</td>
				<td><input type="text" name="stockCount" value="${sku.stockCount }"></td>
			</tr>
			<tr>
				<td>规格</td>
				<td id="">
					<table class="table" id="tabelProp">
						<tr>
							<td>规格名</td>
							<td>规格选项</td>
							<td>操作
								<button type="button" onclick="addProp()">添加规格属性</button>
							</td>
						</tr>
						<c:forEach items="${sku.optionList}" var="skuSpec">
		     			<tr>
			<td><select name="specId" onchange="specChange($(this))">
			
					<c:forEach items="${specList }" var="spec">

						<option value="${spec.id }" <c:if test="${spec.id==skuSpec.specId}">selected="selected" </c:if>>${spec.specName }</option>
					</c:forEach>
					
					
			</select>
			<input type="hidden"  value="${skuSpec.id}">
			</td>
			<td><select name="optionId">
					<!-- =====optionSelect===== -->
					
			</select></td>
			<td>
			
			<button type="button" class="btn-sm btn-outline-danger" onclick="delprop($(this))">删除</button>
			</td>

		</tr>
		     		
		     		</c:forEach>
					</table>
				</td>
			</tr>
			
			<tr>
			<td>购物车小图</td>
			<td>
			<input type="hidden" name="cartThumbnail" value="${sku.cartThumbnail }">
			<input type="file"   name="cartThumbnailFile" id="cartThumbnailId">
			</td>
			</tr>
			<tr>
			<td>图片</td>
			<td>
			<input type="hidden" name="image" value="${sku.image }">
				<input type="file"   name="imageFile" id="imageId">
			</td>
			</tr>
			<tr>
			
			<td>
			
			<button type="button" onclick="commitData()">提交</button>
			</td>
			</tr>
		</table>
	</form>

	<table id="trid" style="display: none" class="table">
		<tr>
			<td><select name="specId" onchange="specChange($(this))">
			<option value="">请选择</option>
					<c:forEach items="${specList }" var="spec">

						<option value="${spec.id }" >${spec.specName }</option>
					</c:forEach>

			</select>
			
			</td>
			<td><select name="optionId">
					<!-- =====optionSelect===== -->
					
			</select></td>
			<td>
			
			<button type="button" class="btn-sm btn-outline-danger" onclick="delprop($(this))">删除</button>
			</td>

		</tr>
	</table>
	<script type="text/javascript">
	//添加一行
	function addProp(){
		$("#tabelProp").append($("#trid").html());
	}
	//删除一行
	function delprop(obj){
		obj.parent().parent().remove();
	}
	function specChange(specObj){
		var specId=specObj.val();
		//alert(specId)
		$.post('spec/findSpecOptionById',{specId:specId},function(data){
			// 显示属性值的下拉框
			//alert(JSON.stringify(data))
			var optionSelect = specObj.parent().next().children(":first");
			var opId= specObj.next().val();
			optionSelect.empty();
			
			for(var op in data){
				
				alert(opId+"id")
				alert(data[op].id)
				if(opId==data[op].id){
					optionSelect.append("<option value='"+data[op].id+"' selected>"+data[op].optionName+"</option>")
				}else{
					optionSelect.append("<option value='"+data[op].id+"'>"+data[op].optionName+"</option>")
				}
				
			}
		})
		
	}
	
	$("[name='specId']").each(function(){
		//alert($(this).val())
		specChange($(this))
	})
	//提交数据
	function commitData(){
		var formData = new FormData($("#skuForm")[0])
		$.ajax({url:'/sku/update',
				data:formData,
				type:"post",
				processData:false,
				contentType:false,
				success:function(data){
					if(data==true){
						alert('修改成功')
						//跳转到列表页面
						var url="/sku/list";
						$("#workArea").load(url)
					}else{
						alert('添加失败')
					}
				}
					
		})
	}
	</script>
</body>
</html>